<section>
	<h1>The illusion of movement</h1>

	<p>By changing the display of the elements immediately before and after the transition, we can create the illusion that a single element is moving across the screen and into a different part of the DOM.</p>

	<pre><code>// set the stage so ramjet copies the right styles...
{{to}}.classList.remove('hidden');

ramjet.transform( {{from}}, {{to}}, {
  done: function () {
    // this function is called as soon as the transition completes
    {{to}}.classList.remove('hidden');
  }
});

// ...then hide the original elements for the duration of the transition
a.classList.add('hidden');
b.classList.add('hidden');
</code></pre>

	<div class='demo' on-tap='start'>
		<div class='a'><span>a</span></div>
		<div class='b hidden'><span>b</span></div>

		<StartButton duration='400' paused='{{!transitioning}}'/>
	</div>
</section>

<style>
	.a.hidden {
		background: white;
	}

	.b.hidden {
		background: white;
	}
</style>

<script>
	const ramjet = require( './ramjet' );
	const tap = require( 'ractive-events-tap' );

	const addClass = require( './addClass' );
	const removeClass = require( './removeClass' );

	component.exports = {
		data: () => ({
			transitioning: false,
			reverse: false
		}),

		computed: {
			from: '${reverse} ? "b" : "a"',
			to: '${reverse} ? "a" : "b"'
		},

		onrender: function () {
			const a = this.find( '.a' );
			const b = this.find( '.b' );

			this.on( 'start', () => {
				if ( this.get( 'transitioning' ) ) return;

				const reverse = this.get( 'reverse' );

				this.set( 'transitioning', true );

				const from = reverse ? b : a;
				const to = reverse ? a : b;

				removeClass( from, 'hidden' );
				removeClass( to, 'hidden' );

				ramjet.transform( from, to, {
					done: () => {
						this.set( 'transitioning', false );

						removeClass( to, 'hidden' );
						this.toggle( 'reverse' );
					}
				});

				addClass( from, 'hidden' );
				addClass( to, 'hidden' );
			});
		},

		events: {
			tap
		}
	};
</script>